<script>
    // 在jQuery中表示文档加载完成后开始执行(不需要按钮或时间触发)，window.load=function() {}
    $(document).ready(function () {
        // 第一步：发送Ajax请求去访问/xxx接口，获取json
        $.get('/xxx', function (data) {
            // 获取响应并填充
            for (var i in data) {
                $("#element_id").append('<li>' + data[i] + '</li>')
            }
        })
    });
</script>

<!--&lt;!&ndash;jinjia2 模板用法&ndash;&gt;-->

<!--<body>-->
<!--<table width="500" border="1" align="center" cellpadding="5">-->
<!--    <tr>-->
<!--        <td width="20%">编号</td>-->
<!--        <td width="30%">书名</td>-->
<!--        <td width="30%">作者</td>-->
<!--        <td width="20%">价格</td>-->
<!--    </tr>-->
<!--    {% for book in books %}-->
<!--    <tr>-->
<!--        <td>{{book.id}}</td>-->
<!--        <td>{{book.title}}</td>-->
<!--        <td>{{book.author}}</td>-->
<!--        <td>{{book.price}}</td>-->
<!--    </tr>-->
<!--    {% endfor %}}-->
<!--</table>-->
<!--</body>-->

<!--vue用法-->
<!--
1. 填充时绑定json数据，进行类似于Jinja2的填充方式
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书销售页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <table width="500" border="1" align="center" cellpadding="5">
        <tr>
            <td width="20%">编号</td>
            <td width="30%">书名</td>
            <td width="30%">作者</td>
            <td width="20%">价格</td>
        </tr>
        <tbody id="booklist">
            <tr v-for="book in content">
                <td>{{book.id}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
                <td>{{book.price}}</td>
            </tr>
        </tbody>
    </table>


    <script>
        var books = [
            {'id': 1, 'title': 'PHP', 'author': '张三', 'price': 52},
            {'id': 2, 'title': 'Python', 'author': '李四', 'price': 36},
            {'id': 3, 'title': 'Java', 'author': '王五', 'price': 68}
        ];
        var v = new Vue({
            el: '#booklist', // 绑定的元素不能与v-for同级
            data: {content: books}
        });
    </script>
</body>
</html>